<template>
	<view>
		<!-- 页面区域 -->
		<view>
			<index ref="index" v-show="active == 1"></index>
			<mains ref="mains" v-show="active == 2"></mains>
		</view>
		<!-- 底部tabbar -->
		<div class="tabbar">
			<view class="tabbar-item" @click="handletabbar(1)">
				<image v-show="active == 1" src="@/static/tab/a1.png" mode=""></image>
				<image v-show="active != 1" src="@/static/tab/a2.png" mode=""></image>
				<view :class="{tabbarfont : active == 1}">首页</view>
			</view>
			<view class="tabbar-item" @click="handletabbar(2)">
				<image v-show="active == 2" src="@/static/tab/a3.png" mode=""></image>
				<image v-show="active != 2" src="@/static/tab/a4.png" mode=""></image>
				<view :class="{tabbarfont : active == 2}">我的</view>
			</view>
		</div>
	</view>
</template>

<script>
	import index from '@/pages/index/index.vue'
	import mains from '@/pages/mains/mains.vue'
	export default {
		components: {
			index,
			mains
		},
		data() {
			return {
				active: 1
			}
		},
		async onLoad() {
			let res = await this.$api.getconfig();
			if (res.code == 1) {
				uni.setStorageSync('mapkey',res.data.mapkey);
				uni.setStorageSync('download',res.data.download);
				// uni.setStorageSync('token','d2a389f2515ada3c0a7d599b48f5bb15')
			}
		},
		onShow() {
			if (uni.getStorageSync('tabtype')) {
				this.active = uni.getStorageSync('tabtype')
			}
			this.$nextTick(() => {
				switch (Number(this.active)) {
					case 1:
						uni.setNavigationBarTitle({
							title: "首页"
						})
						this.$refs.index.getData();
						uni.setStorageSync('tabtype', 1);
						break;
					case 2:
						uni.setNavigationBarTitle({
							title: "我的"
						})
						uni.setNavigationBarColor({
							frontColor: '#000000',
						    backgroundColor: '#F77064'
						})
						this.$refs.mains.getData();
						uni.setStorageSync('tabtype', 2);
						break;
				}
			})
		},
		methods: {
			handletabbar(active) {
				this.active = Number(active)
				this.$nextTick(() => {
					switch (this.active) {
						case 1:
							uni.setNavigationBarTitle({
								title: "首页"
							})
							uni.setNavigationBarColor({
								frontColor: '#000000',
							    backgroundColor: '#FFFFFF'
							})
							this.$refs.index.getData();
							uni.setStorageSync('tabtype', 1);
							break;
						case 2:
							uni.setNavigationBarTitle({
								title: "我的"
							})
							uni.setNavigationBarColor({
								frontColor: '#000000',
							    backgroundColor: '#F77064'
							})
							this.$refs.mains.getData();
							uni.setStorageSync('tabtype', 2);
							break;
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.tabbar {
		width: 100%;
		height: 165rpx;
		z-index: 999;
		position: fixed;
		left: 0;
		bottom: 0;
		background: #E2867E;
		display: flex;
		justify-content: space-between;
		padding: 0 120rpx;
		box-sizing: border-box;
		padding-bottom: 20rpx;

		.tabbar-item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 80rpx;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-bottom: 8rpx;
			}

			view {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FEFEFE;
			}
		}

		.tabbarfont {
			color: #AA3128 !important;
		}
	}
</style>